﻿@page "/typography"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    RadzenText
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Use the <code>&lt;RadzenText&gt;</code> component to format text in your application.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase text formatting with predefined <code>TextStyle</code> options (H1-H6/Subtitle1-2/Body1-2/Caption/Overline), semantic <code>TagName</code> property for accessibility, display headings for emphasis, text alignment options, theme functional text colors using CSS variables, text transformation classes (uppercase/lowercase/capitalize), and text wrapping behaviors (wrap/nowrap/truncate).
</RadzenText>

<RadzenText Anchor="typography#text-style" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Text Style
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>TextStyle</code> property to apply a predefined text style.
</RadzenText>
<RadzenExample Example="TextStyles">
    <TextStyles />
</RadzenExample>

<RadzenText Anchor="typography#text-tag-name" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text Style and Tag Name
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    You can use <code>TextStyle</code> together with <code>TagName</code> to apply different styling while keeping the code semantically correct.
</RadzenText>
<RadzenExample Example="TextTagName">
    <TextTagName />
</RadzenExample>

<RadzenText Anchor="typography#text-display-headings" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Display headings
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use display headings to emphasise a text or page title. Display headings are usually larger than traditional headings.
</RadzenText>
<RadzenExample Example="TextDisplayHeadings">
    <TextDisplayHeadings />
</RadzenExample>

<RadzenText Anchor="typography#text-align" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text Align
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    You can use <code>TextAlign</code> to align your text.
</RadzenText>
<RadzenExample Example="TextAlignment">
    <TextAlignment />
</RadzenExample>

<RadzenText Anchor="typography#text-color" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text Functional Colors
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    These are the theme's text color CSS variables. Each theme has its own text color values assigned. Change the theme to preview them. You can use CSS variables in styles e.g. <code>style="color: var(--rz-text-secondary-color);"</code>
</RadzenText>
<RadzenExample Example="TextColor">
    <TextColor />
</RadzenExample>

<RadzenText Anchor="typography#text-transform" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text Transform
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use CSS classes to capitalize text. E.g. <code>class="rz-text-uppercase"</code>.
</RadzenText>
<RadzenExample Example="TextTransform">
    <TextTransform />
</RadzenExample>

<RadzenText Anchor="typography#text-wrap" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text Wrap
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>rz-text-wrap</code>, <code>rz-text-nowrap</code>, and <code>rz-text-truncate</code> CSS classes to specify how the text content should wrap. E.g. <code>class="rz-text-truncate"</code>.
</RadzenText>
<RadzenExample Example="TextWrap">
    <TextWrap />
</RadzenExample>